<template>
  <div class="list">
    <div class="title"><h3>猜你喜欢</h3></div>
    <div class="sort">
        <span :style="{fontWeight:currentIndex == index?'bold':''}" @click="handleclick(index)"  v-for="(item,index) in list" :key="index">{{item}}</span>
    </div>
    <div class="goods" v-for="(item,index) in goods" :key="index">
        <div class="imgBox">
            <img :src="item.pic" alt="">
        </div>
        <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="count">
                <span>★{{item.score}}</span>
                <span>月售:{{item.count}}</span>
            </div>
            <div class="price">
                <div class="left">
                    <span>起送:￥{{item.start}}</span>
                    <span>配送:￥{{item.farer}}<span class="delLine">￥{{item.del}}</span></span>
                </div>
                <div class="right">
                    <span>{{item.min}}分钟</span>
                    <span>{{item.far}}km</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
var pic="https://img1.baidu.com/it/u=2982606892,535841361&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
export default {
    data() {
        return{
            currentIndex:'',
            list:['综合排序','距离最近','销量最高','筛选'],
            goods:[
                {pic,name:'金百万烤鱼',score:4.3,count:1632,start:20,farer:3,del:6,min:47, far:3.7},
                {pic,name:'稻香金源饺子馆',score:4.4,count:230,start:20,farer:3.5,del:4.5,min:40, far:3.0},
                {pic,name:'烤鸭店',score:4.2,count:290,start:20,farer:3.3,del:4.6,min:50, far:4.7},
            ]
        }
    },
    methods:{
        handleclick(index){
            this.currentIndex = index;
            if( index == 1 ){ //点击了第一个按钮
                this.goods.sort((a,b)=>{
                    return a.far - b.far;
                })
            }
            else if( index == 2 ){ //点击了第三个按钮
                this.goods.sort((a,b)=>{
                    return b.count - a.count;
                })
            }
        }
        

    }
}
</script>

<style>
    h3{
        margin: 10px;
    }
    .sort{
        margin: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .goods{
        display: flex;
        margin: 10px;
        height: 100px;
        /* flex-direction: column; */
    }
    .goods .imgBox{
        margin-right: 10px;
    }
    .goods .imgBox img{
        height: 80px;
    }
    .goods .text{
        margin: 0 10px;
    }
    .goods .text .name{
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .goods .text .count span{
        font-size: 14px;
        margin-right: 20px;
    }
    .goods .text .count span:nth-child(1){
        color:orangered
    }
    .goods .text .price{
        font-size: 12px;
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .goods .text .price .left{
        flex: 1;
    }
    .goods .text .price .left span{
        margin-right: 10px;
    }
    .delLine{
        text-decoration:line-through;
    }
</style>